<template>
  <div
    v-if="visible"
    style="position: absolute; top: 0; right: 0; bottom: 0; left: 0"
  >
    <div
      style="
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 60px;
      "
    >
      <el-button size="large" type="primary" @click="toSJ">报检</el-button>
    </div>
    <el-table
      :data="state.reportInspectionList"
      style="width: 100%; height: calc(100vh - 165px); border-radius: 5px"
    >
      <el-table-column label="检验单" prop="checkCode" width="108px" />
      <el-table-column label="报检单" prop="inspectCode" width="108px" />
      <el-table-column label="存货">
        <template #default="{ row }">
          <div>
            <div style="font-size: 14px; color: #666">
              {{ row.invcode }}
            </div>
            <div style="font-size: 16px; font-weight: 700; color: #333">
              {{ row.invname }}
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="报检数量" prop="qty" width="90" />
      <el-table-column label="检验数量" prop="checkQty" width="90" />
      <el-table-column label="合格数量" prop="qualifiedQty" width="90">
        <template #default="{ row }">
          <span style="font-size: 16px; font-weight: 700; color: #1890ff">
            {{ row.qualifiedQty }}
          </span>
        </template>
      </el-table-column>
      <el-table-column label="不合格数量" prop="unqualifiedQty" width="90">
        <template #default="{ row }">
          <span style="font-size: 16px; font-weight: 700; color: #e62b46">
            {{ row.unqualifiedQty }}
          </span>
        </template>
      </el-table-column>
      <el-table-column label="存货规格" prop="invspec" width="100" />
      <el-table-column label="创建信息" prop="unqualifiedQty" width="160px">
        <template #default="{ row }">
          <div>
            <div>{{ row.createUser }}</div>
            <div>{{ row.createTime }}</div>
          </div>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script setup>
  // import { Select, SemiSelect } from '@element-plus/icons-vue'
  import {
    queryCheckHPageApi,
    shoujianReportInspectMoldApi,
    shoujianReportInspectApi,
  } from '@/api/qm/index.ts'
  import { localStorageConfig } from '@/config/localstorage.config'
  const pkCorp = localStorage.getItem(localStorageConfig.__pkCorp),
    $baseMessage = inject('$baseMessage'),
    $baseLoading = inject('$baseLoading')
  const visible = ref(false)

  const state = reactive({
    eqData: null,
    dispatchData: null,
    reportInspectionList: [],
  })
  const queryCheckRecord = async () => {
    const { data } = await queryCheckHPageApi({
      pkCorp,
      pkDispatchSeq: state.dispatchData.pkDispatchSeq,
    })
    state.reportInspectionList = data.list || []
    // console.log('queryCheckRecord', res)
  }

  const toSJ = () => {
    if (state.dispatchData.useMold) {
      toShoujianReportInspectMold()
    } else {
      toShoujianReportInspect()
    }
  }

  const toShoujianReportInspectMold = async () => {
    const params = {
      ...state.dispatchData,
    }
    const load = $baseLoading()
    try {
      const { msg } = await shoujianReportInspectMoldApi(params)
      $baseMessage(msg || '操作成功', 'success')
      load.close()
      queryCheckRecord()
    } catch (error) {
      load.close()
    }
  }
  const toShoujianReportInspect = async () => {
    const params = {
      pkDispatchSeq: state.dispatchData.pkDispatchSeq,
      pkCorp: pkCorp,
      pkInv: state.dispatchData.pkInv,
    }
    const load = $baseLoading()
    try {
      const { msg } = await shoujianReportInspectApi(params)
      $baseMessage(msg || '操作成功', 'success')
      load.close()
      queryCheckRecord()
    } catch (error) {
      load.close()
    }
  }

  const toShow = (dispatchData) => {
    visible.value = true
    state.dispatchData = dispatchData
    queryCheckRecord()
  }
  const toHide = () => {
    visible.value = false
    state.dispatchData = null
  }
  defineExpose({
    toShow,
    toHide,
    queryCheckRecord,
  })
</script>
<style lang="scss" scoped>
  :deep(.el-table .cell) {
    padding: 0;
  }
</style>
